﻿@import "Common.less";

/* HAProxy & Traffic */
#host {
    width: 300px;
    padding: 2px 2px 2px 20px;
    margin-right: 5px;
    margin-left: 2px;
    border: @grey-border;
    border-radius: 5px;
}
.ac_results {
    background-color: White; 
    border: @grey-border;
    padding: 0;
    z-index: 200;
    width: 320px !important;
    border-radius: 5px;

    ul {
        width: 100%;
        list-style: none;

        li {
            padding: 2px 5px;
            line-height: 16px;
            overflow: hidden;
            margin: 0;

            &:nth-child(odd) {
                background-color: #fafafa;
            }
            &.ac_over {
                background-color: #57708F;
	            background-image:
		            -webkit-gradient(linear, 0 0, 0 100%,
			            color-stop(0, #7294BC),
			            color-stop(1, #57708F));
                color: White;
            }
        }
    }
}
.route-times {
    padding: 4px 20px;

    & > table {
        width: 100%;
        & > tbody > tr:nth-child(odd) > td {
            background-color: #fafafa;
        }
    }
    thead th {
        font-weight: bold;
        border-bottom: solid 1px #888;
    }
    .route-name {
        font-weight: bold;
        color: #444;
    }
    .nvp .name {
        width: 190px;
    }
    .legend {
        font-weight: normal;
        font-size: 80%;
        float: right;
        display: inline-block;
        border: @grey-border;
        padding: 4px 8px;
        border-radius: 5px;
    }
    .legend-item {
        display: inline-block;
        font-size: 13px;
        line-height: 13px;
        .legend-block {
            width: 16px;
            height: 13px;
            display: inline-block;
            vertical-align: bottom;
        }
    }
    .color-legend {
        display: inline-block;
        width: 20px;
        height: 14px;
        vertical-align: middle;
    }
}

/* HAProxy Current Status */
.haproxy-dashboard {
    width: 1000px;
    
    .db-label {
        color: #aaa;
    }
    tr.backend:last-child td {
        border-top: @grey-border;
        background: #E8E8D0;
    }
    tr.critical-row th > div {
        color: @red;
    }
    tr.critical-row + tr.critical-row td {
        border-top: solid 1px transparent;
    }
    td:last-child {
        width: auto;
    }
    tbody {
        .proxy-Backend, tr.proxy-Backend td {
            background-color: #E8E8D0;
        }
    }
    .node-group td b {
        color: #444;
    }
    .watched-proxy {
        tr {
            &:hover {
                td {
                    border-top-width: 0;
                    border-bottom-width: 0;
                }
            }
            td {
                border-top-width: 0;
                border-bottom-width: 0;
                padding: 2px;
            }
            td:first-child, th:first-child {
                border-left: solid 1px rgba(65, 95, 157, 0.4);
            }
            td:last-child, th:last-child {
                border-right: solid 1px rgba(65, 95, 157, 0.4);
            }
            &:first-child th {
                border-top: solid 1px rgba(65, 95, 157, 0.4);
            }
            &:last-child td {
                border-bottom: solid 1px rgba(65, 95, 157, 0.4);
            }
            &.warning-row, &.maintenance-row, &.critical-row {
                td {
                    border-top-width: 1px;
                    border-bottom-width: 1px;
                    padding: 1px 2px;
                }
            }
        }
        &.proxy-header {  
            tr:first-child th {
                margin-top: 50px;          
            }
            &:before {
                content: "";
                display: block;
                height: 20px;
            }
        }
        &.proxy-body {
            tr:last-child td {
                margin-bottom: 20px;
            } 
            &:after {
                content: "";
                display: block;
                height: 20px;
            }
        }        
        .category-row {
            .node-name-link {
                color: #666;
                &:hover {
                    text-decoration: none;
                }
            }
            div {
                border-bottom: solid 1px rgba(65, 95, 157, 0.4);
            }
        }
    }
}
.proxies-wrap { 
    padding: 4px 8px; 
    margin: 0 auto; 
}
.proxies { 
    width: 100%; 

    h2 { 
        text-align: center; 
        padding-top: 10px; 
    }    
    th, td {
        padding: 2px;
    }
    th { 
        font-weight: bold; 
        border-bottom: solid 1px;  
        text-align: left; 
    }
    td {
        .size { 
            font-weight: bold; 
        }
    }
    tfoot td { 
        font-weight: bold; 
        border-top: solid 1px #888; 
        margin-top: 5px; 
    }
    .slim {
        th, td {
            padding: 1px 1px;
        }
    }
    .top-header th { 
        text-align: left; 
    }
    .main-row-header th, .sub-row-header th {
        border: @grey-border;
    }
    .main-row-header th:first-child { 
        border: 0; 
    }
    .top-header td, .sub-row-header th {
        font-weight: normal; 
        text-align: left;
    }
    .proxy-Server td {
        padding: 2px;
    }
    .proxy-Backend td {
        padding: 3px 2px;
    }

    .frontend { background: rgb(232,232,208); }
    .socket { background: rgb(208,208,208); }
    .backend { background: rgb(232,232,208); }
    .frontend, .backend {
        .name { 
            font-weight: bold; 
        }
    }
    .status {
        &.ActiveUp {background: rgb(192,255,192);}
        &.ActiveUp:nth-child(even) { background:rgba(192,255,192,0.75); }
        &.ActiveDownGoingUp { background:rgb(255,208,32); }
        &.ActiveDownGoingUp:nth-child(even) { background:rgba(255,208,32,0.75); }
        &.ActiveUpGoingDown { background:rgb(255,255,160); }
        &.ActiveUpGoingDown:nth-child(even) { background:rgba(255,255,160,0.75); }
        &.BackupUp { background:rgb(176,208,255); }
        &.BackupUp:nth-child(even) { background:rgba(176,208,255,0.75); }
        &.BackupDownGoingUp { background:rgb(255,128,255); }
        &.BackupDownGoingUp:nth-child(even) { background:rgba(255,128,255,0.75); }
        &.BackupUpGoingDown { background:rgb(192,96,255); }
        &.BackupUpGoingDown:nth-child(even) { background:rgba(192,96,255,0.75); }
        &.Down { background:rgb(255,144,144); }
        &.Down:nth-child(even) { background:rgba(255,144,144,0.85); }
        &.NotChecked { background:rgb(224,224,224); }
        &.NotChecked:nth-child(even) { background:rgba(224,224,224,0.75); }
        &.Maintenance { background:rgb(192,120,32); }
        &.Maintenance:nth-child(even) { background:rgba(192,120,32,0.75); }
    }
}

/* Name Value Pair Sections */
.nvp {
    tr td {
        border-bottom: solid 1px #efefef;
    }
    .name {
        color: #AAA;
    }
    .value {
        color: #444;
    }
}

.lb-active {
    color: #444;
    font-weight: bold;
}
.lb-inactive {
    color: #888;
}
.haproxy-admin-servers {  
    width: 330px;
    float: right;
    clear: right;
    margin-right: 20px;

    table {        
        white-space: nowrap;
    }
    td:last-child {
        width: auto;
    }  
}